// 头部
import "@/style/components/header.scss";
import logo192 from "@/assets/logo/logo192.png";
import { useState, useEffect } from "react";
import { Flex, Button, Menu } from "antd";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
const _ = require('lodash');
// 导航
const titleNav = [
    { label: "首页", key: "key_1" },
    { label: "优秀案例", key: "key_2" },
    { label: "自主研发", key: "key_3" },
    { label: "核心优势", key: "key_4" },
    { label: "新闻资讯", key: "key_5" },
    { label: "关于我们", key: "key_6" },
    { label: "联系我们", key: "key_7" },
];
function Header({ index, navClick }) {
    // 窗口大小变化时更新状态
    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
    // 折叠状态
    const [collapsed, setCollapsed] = useState(false);
    // 折叠状态改变
    const toggleCollapsed = () => {
        setCollapsed(!collapsed);
    };
    // 监听窗口大小变化
    useEffect(() => {
        const handleResize = () => {
            setWindowWidth(window.innerWidth);
            if (windowWidth < 1410) {
                setCollapsed(false);
            }
        };
        window.addEventListener("resize", handleResize);
        return () => window.removeEventListener("resize", handleResize);
    }, []);
    return (
        <div className="header">
            <div className="header-content">
                <img
                    src={logo192}
                    alt="logo"
                    title="济南麦冬数字科技有限公司"
                    className="header-logo"
                />
                {windowWidth > 630 && (
                    <div className="header-title">济南麦冬数字科技有限公司</div>
                )}
                {windowWidth > 1410 ? (
                    <div className="title-nav-box">
                        <Flex wrap gap="large">
                            {titleNav.map((_, i) => (
                                <Button
                                    key={_.key}
                                    className={
                                        index === i
                                            ? "title-nav-primary"
                                            : "title-nav"
                                    }
                                    size={ "middle" }
                                    onClick={() => navClick(_, i)}
                                    color={index === i ? "primary" : "default"}
                                    variant="link"
                                >
                                    {_.label}
                                </Button>
                            ))}
                        </Flex>
                    </div>
                ) : (
                    <>
                        <Button
                            type="text"
                            onClick={toggleCollapsed}
                            className="title-nav-buttom"
                        >
                            {collapsed ? (
                                <MenuUnfoldOutlined />
                            ) : (
                                <MenuFoldOutlined />
                            )}
                        </Button>
                        {collapsed && (
                            <Menu
                                className="title-nav-menu"
                                defaultSelectedKeys={[titleNav[index].key]}
                                defaultOpenKeys={[titleNav[index].key]}
                                mode="inline"
                                inlineCollapsed={false}
                                onClick={(e) => {
                                    const i = _.findIndex(titleNav, { key: e.key })
                                    navClick(titleNav[i], i);
                                }}
                                items={titleNav}
                            />
                        )}
                    </>
                )}
            </div>
        </div>
    );
}

export default Header;
